<template>
  <view class="feedback-container">
    <!-- 顶部导航 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <text class="iconfont icon-arrow-left"></text>
      </view>
      <view class="header-title">问题反馈</view>
      <view class="header-right"></view>
    </view>
    
    <!-- 反馈表单 -->
    <view class="feedback-form">
      <!-- 标题输入 -->
      <view class="form-item">
        <view class="item-label">反馈标题</view>
        <view class="item-content">
          <input 
            type="text" 
            placeholder="请输入标题" 
            class="input-field"
            v-model="feedback.title"
            @blur="validateTitle"
          />
        </view>
        <view class="error-tip" v-if="formErrors.title">{{ formErrors.title }}</view>
      </view>
      
      <!-- 内容输入 -->
      <view class="form-item content-item">
        <view class="item-label">反馈内容</view>
        <view class="item-content">
          <textarea 
            placeholder="请详细描述您遇到的问题或建议..." 
            class="textarea-field"
            v-model="feedback.content"
            @blur="validateContent"
            :maxlength="500"
          ></textarea>
          <view class="word-count">
            {{ feedback.content.length || 0 }}/500
          </view>
        </view>
        <view class="error-tip" v-if="formErrors.content">{{ formErrors.content }}</view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-button">
      <button 
        class="btn-submit" 
        :disabled="!isFormValid"
        @click="submitFeedback"
      >
        提交反馈
      </button>
    </view>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
      // 反馈表单数据
      feedback: {
        title: '',
        content: ''
      },
      
      // 表单错误信息
      formErrors: {
        title: '',
        content: ''
      }
    }
  },
  computed: {
    // 表单是否有效
    isFormValid() {
      return !this.formErrors.title && 
             !this.formErrors.content &&
             this.feedback.title.trim() && 
             this.feedback.content.trim().length >= 10;
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 验证标题
    validateTitle() {
      if (!this.feedback.title.trim()) {
        this.formErrors.title = '请输入反馈标题';
      } else if (this.feedback.title.length < 5) {
        this.formErrors.title = '标题长度不能少于5个字符';
      } else {
        this.formErrors.title = '';
      }
    },
    
    // 验证内容
    validateContent() {
      if (!this.feedback.content.trim()) {
        this.formErrors.content = '请输入反馈内容';
      } else if (this.feedback.content.length < 10) {
        this.formErrors.content = '内容长度不能少于10个字符';
      } else {
        this.formErrors.content = '';
      }
    },
    
    // 提交反馈
    submitFeedback() {
      // 再次验证所有字段
      this.validateTitle();
      this.validateContent();
      
      // 如果表单无效，不提交
      if (!this.isFormValid) return;
	  console.log('345we453w535')
	  request({
	  	url: 'user/feedback',
	  	method: 'post',
	  	data: {
			name:this.feedback.title,
			content:this.feedback.content,
			
	  	},
	  }).then(res => {
	  	console.log(res)
	  	if(res.status==200){
	  		// 显示成功提示
	  		uni.showToast({
	  		  title: '反馈提交成功',
	  		  icon: 'success',
	  		  duration: 2000
	  		});
	  		
	  		// 清空表单
	  		this.feedback = {
	  		  title: '',
	  		  content: ''
	  		};
	  		
	  		// 返回上一页
	  		setTimeout(() => {
	  		  uni.navigateBack();
	  		}, 2000);
	  	}
	  })
    }
  }
}
</script>

<style lang="scss" scoped>


.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feedback-container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 顶部导航 */
.page-header {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .header-left, .header-right {
    width: 80rpx;
    text-align: center;
  }
  
  .header-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }
  
  .icon-arrow-left {
    font-size: 40rpx;
    color: #666;
  }
}

/* 反馈表单 */
.feedback-form {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-label {
    width: 200rpx;
    font-size: 30rpx;
    color: #666;
    padding-left: 30rpx;
  }
  
  .item-content {
    flex: 1;
    padding-right: 30rpx;
    
    .input-field {
      width: 100%;
      height: 60rpx;
      font-size: 30rpx;
      color: #333;
      text-align: right;
    }
    
    .textarea-field {
      width: 100%;
      min-height: 240rpx;
      font-size: 30rpx;
      color: #333;
      text-align: left;
      padding: 10rpx 0;
    }
    
    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  
  .error-tip {
    position: absolute;
    right: 30rpx;
    bottom: 10rpx;
    color: #ff4545;
    font-size: 24rpx;
  }
}

.content-item {
  align-items: flex-start;
}

/* 提交按钮 */
.submit-button {
  margin: 60rpx 30rpx;
  
  .btn-submit {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #1677ff;
    color: #fff;
    border-radius: 45rpx;
    font-size: 34rpx;
    text-align: center;
    box-shadow: 0 4rpx 15rpx rgba(22, 119, 255, 0.2);
    transition: all 0.3s ease;
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    &:not(:disabled) {
      opacity: 1;
      cursor: pointer;
      
      &:hover {
        background-color: #0e62d0;
        box-shadow: 0 6rpx 20rpx rgba(22, 119, 255, 0.3);
      }
    }
  }
}
</style>
